<template>
  <div>
    <a-modal
      title="监播汇总"
      :width="1200"
      :visible="visible"
      @cancel="handleCancel"
      :footer="null"
    >
      <a-form layout="vertical">
        <!-- 热门搜索部分 -->
        <a-row class="my-row">
          <a-col :span="12">
            <a-card :bordered="true" title="订单详情">
              <a-row :gutter="24">
                <a-col :xs="24" :sm="24">
                  <span style="font-size: 25px">订单编号：{{pushSearch.orderNumber}}</span>
                </a-col>
              </a-row>
              <a-row>
                <a-col :xs="24" :sm="24">
                  <a-col :xs="24" :sm="24">
                    <span style="font-size: 25px">状态：{{pushSearch.orderStatus}}</span>
                  </a-col>
                </a-col>
              </a-row>
              <a-row :gutter="24">
                <a-col :xs="24" :sm="24">
                  <span style="font-size: 25px">投放时间：{{pushSearch.putTime}}</span>
                </a-col>
              </a-row>
              <a-row :gutter="24">
                <a-col :xs="24" :sm="24">
                  <span style="font-size: 25px">终端数量：{{pushSearch.terminalNum}} 台</span>
                </a-col>
              </a-row>
              <a-row :gutter="24">
                <a-col :xs="24" :sm="24">
                  <span style="font-size: 25px">城市：{{pushSearch.city}}</span>
                </a-col>
              </a-row>
              <a-row :gutter="24">
                <a-col :xs="24" :sm="24">
                  <span style="font-size: 25px">播放时间：{{pushSearch.playStartTime}}~{{pushSearch.playEndTime}}</span>
                </a-col>
              </a-row>
            </a-card>
          </a-col>
          <a-col :span="12">
            <!-- 在线流量图部分 -->
            <a-card :bordered="true" title="在线流量图">
              <div ref="echartRef" id="echartTwo" class="echartBox"></div>
            </a-card>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="24">
            <!-- 监播汇总部分 -->
            <a-card :bordered="true">
              <div class="salesCard">
                <a-tabs default-active-key="1" size="large">
                  <div class="extra-wrapper" slot="tabBarExtraContent">
                    <a-range-picker :style="{ width: '230px' }" @change="onChange"/>
                  </div>
                  <a-tab-pane tab="监播汇总" key="1">
                    <s-table
                      ref="table"
                      :columns="columns"
                      :data="loadData"
                      :alert="options.alert"
                      :rowKey="(record) => record.id"
                      :rowSelection="options.rowSelection"
                    >
                  <span slot="action" slot-scope="text, record">
                    <a-popconfirm placement="topRight" title="确认删除？" @confirm="() => singleDelete(record)">
                      <a>删除</a>
                    </a-popconfirm>
                  </span>
                    </s-table>
                  </a-tab-pane>
                </a-tabs>
              </div>
            </a-card>
          </a-col>
        </a-row>

      </a-form>
    </a-modal>
  </div>
</template>
<script>

import {
  ChartCard,
  MiniArea,
  MiniBar,
  MiniProgress,
  RankList,
  Bar,
  Trend,
  NumberInfo,
  MiniSmoothArea,
  STable,
  XDown
} from '@/components'
import { getDetailByMangerId } from '@/api/modular/system/pushSearchManage'
import * as echarts from 'echarts'
import { monitoringGatherPage, monitoringGatherDelete, getByDate } from '@/api/modular/system/monitoringGatherManage'

export default {
  components: {
    XDown,
    STable,
    ChartCard,
    MiniArea,
    MiniBar,
    MiniProgress,
    RankList,
    Bar,
    Trend,
    NumberInfo,
    MiniSmoothArea
  },

  data() {
    return {
      queryParam: {},
      // 搜索用户数
      columns: [
        {
          title: '日期',
          align: 'center',
          dataIndex: 'gatherData'
        },
        {
          title: '播放台数',
          align: 'center',
          dataIndex: 'gatherNum'
        },
        {
          title: '播放次数',
          align: 'center',
          dataIndex: 'gatherSize'
        },
        {
          title: '观看人数',
          align: 'center',
          dataIndex: 'gatherPerson'
        },
        {
          title: '总观看人数',
          align: 'center',
          dataIndex: 'gatherAllPerson'
        },
        {
          title: '操作',
          width: '150px',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' }
        }
      ],
      managerId: 0,
      loadData: parameter => {
        this.queryParam.managerId = this.managerId
        return monitoringGatherPage(Object.assign(parameter, this.queryParam)).then(res => {
          return res.data
        })
      },
      options: {
      },
      pushSearch: {},
      visible: false,
      xAxisData: [],
      yAxisData: []
    }
  },
  // mounted() {
  //   this.$nextTick(() => {
  //     this.initChartInfo(this.managerId).then(() => {
  //       this.initEchartTwo()
  //     })
  //   })
  // },
  methods: {
    detail(managerId) {
      this.xAxisData = []
      this.yAxisData = []
      console.log('managerId', managerId)
      this.managerId = managerId
      this.searchEdit(managerId)
      setTimeout(() => {
        this.getInitEchart(this.managerId)
      }, 1000)
    },
    getInitEchart(managerId) {
      this.initChartInfo(managerId).then(() => {
        this.initEchartTwo()
      })
      this.handleOk()
    },
    initEchartTwo() {
      const echartTwo = this.$refs.echartRef // document.getElementById('echartTwo') //
      const myChart = echarts.init(echartTwo)
      const option = {
        xAxis: {
          name: '日期',
          type: 'category',
          data: this.xAxisData
        },
        yAxis: {
          name: '播放次数（台/次）',
          type: 'value'
        },
        series: [
          {
            data: this.yAxisData,
            type: 'line'
          }
        ]
      }
      myChart.setOption(option)
    },
    singleDelete(record) {
      const param = [{ 'id': record.id }]
      monitoringGatherDelete(param).then((res) => {
        if (res.success) {
          this.$message.success('删除成功')
          this.getInitEchart(record.managerId)
          this.$refs.table.clearRefreshSelected()
        } else {
          this.$message.error('删除失败') // + res.message
        }
      })
    },
    onChange(date, dateString) {
      this.queryParam.managerId = this.managerId
      this.queryParam.startTime = dateString[0]
      this.queryParam.endTime = dateString[1]
      this.$refs.table.refresh(true)
      const param = { 'managerId': this.managerId, 'startTime': dateString[0], 'endTime': dateString[1] }
      getByDate(param).then((res) => {
        this.xAxisData = res.data.dateList
        this.yAxisData = res.data.gatherDataList
        this.initEchartTwo()
      })
    },
    initChartInfo(id) {
      const param = { 'managerId': id }
      return new Promise((resolve, reject) => {
        getByDate(param).then((res) => {
          this.xAxisData = res.data.dateList
          this.yAxisData = res.data.gatherDataList
          resolve()
        })
      })
    },
    searchEdit(id) {
      console.log('id:', id)
      this.visible = true
      const param = { 'managerId': id }
      getDetailByMangerId(param).then((res) => {
        this.pushSearch = res.data
      })
    },
    handleOk () {
      this.$refs.table.refresh()
    },
    handleCancel () {
      this.visible = false
    }
  }
}
</script>
<style lang="less" scoped>
.extra-wrapper {
  line-height: 55px;
  padding-right: 24px;
  .extra-item {
    display: inline-block;
    margin-right: 24px;

    a {
      margin-left: 24px;
    }
  }
}
.antd-pro-pages-dashboard-analysis-twoColLayout {
  position: relative;
  display: flex;
  display: block;
  flex-flow: row wrap;
  min-height: 300px;
  max-height: 800px;
}
.antd-pro-pages-dashboard-analysis-salesCard {
  height: calc(100% - 24px);
  /deep/ .ant-card-head {
    position: relative;
  }
}
.dashboard-analysis-iconGroup {
  i {
    margin-left: 16px;
    color: rgba(0, 0, 0, 0.45);
    cursor: pointer;
    transition: color 0.32s;
    color: black;
  }
}
.analysis-salesTypeRadio {
  position: absolute;
  right: 54px;
  bottom: 12px;
}
.echartBox {
  //width: 100%;
  height: 300px;
  overflow: visible; /* 确保内容不会被裁剪 */
}
//.my-row {
//  display: grid;
//  grid-template-columns: repeat(2, 1fr);
//}
</style>
